<template>
  <div class="banner-list-new">
    <!-- <BasicTable
      :columns="columns"
      :rows="data"
      :page="page"
      :page-size="2"
      :count="data.length"
      @update:page="onUpdatePage"
    /> -->

    <BasicTable
      v-model:page="page"
      :columns="columns"
      :rows="data"
      :page-size="2"
      :count="data.length"
    />
  </div>
</template>

<script>
import { h } from "vue";
import { getBannerList } from "@/api/banner";
import BasicTable from "@/components/basic-table/index.vue";

export default {
  name: "banner_list-new",

  components: {
    BasicTable,
  },

  data() {
    return {
      columns: [
        {
          title: "Img",
          key: "img",
          width: 240,
          render: (row) => {
            return h("img", { src: row.img, style: "width: 200px" });
          },
        },
        { title: "Alt", key: "alt" },
        { title: "Link", key: "link" },
      ],
      data: [],

      page: 2,
    };
  },

  methods: {
    async fetchData() {
      const result = await getBannerList();
      this.data = result.data;
      // result.data 的长度就是总条数
      this.count = result.data.length;
    },

    onUpdatePage(page) {
      console.log('listNew onUpdatePage', page)
      this.page = page
    }
  },

  mounted() {
    this.fetchData();
  },
};
</script>
